<style>
  #admin-job-log .layui-form-label {
    width: 65px;
  }
</style>

<div class="layui-fluid layui-anim admin-anim" id="admin-job-log" lay-title="调度日志">
  <div class="layui-row admin-container">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body admin-table-full">
          <form class="layui-form layui-table-form" lay-filter="job-log-table-form">
            <div class="layui-row">
              <div class="layui-col-md10">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">Bean名称</label>
                    <div class="layui-input-inline">
                      <input type="text" name="beanName" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">方法名称</label>
                    <div class="layui-input-inline">
                      <input type="text" name="methodName" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label layui-form-label-sm">状态</label>
                    <div class="layui-input-inline">
                      <select name="status">
                        <option value=""></option>
                        <option value="0">成功</option>
                        <option value="1">失败</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md2 layui-col-sm12 layui-col-xs12 table-action-area">
                <div class="layui-btn layui-btn-sm layui-btn-primary table-action" id="query">
                  <i class="layui-icon">&#xe848;</i>
                </div>
                <div class="layui-btn layui-btn-sm layui-btn-primary table-action" id="reset">
                  <i class="layui-icon">&#xe79b;</i>
                </div>
                <div class="layui-btn layui-btn-sm layui-btn-primary table-action action-more"
                     shiro:hasAnyPermissions="job:log:delete,job:log:export">
                  <i class="layui-icon">&#xe875;</i>
                </div>
              </div>
            </div>
          </form>
          <table lay-filter="jobLogTable" lay-data="{id: 'jobLogTable'}"></table>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/html" id="jobLog-times">
  <div>
    {{# if (d.times < 500) { }}
    <span class="layui-badge admin-tag-green">{{d.times}} ms</span>
    {{# } else if (d.times < 1000) { }}
    <span class="layui-badge admin-tag-cyan">{{d.times}} ms</span>
    {{# } else if (d.times < 1500) { }}
    <span class="layui-badge admin-tag-orange">{{d.times}} ms</span>
    {{# } else { }}
    <span class="layui-badge admin-tag-red">{{d.times}} ms</span>
    {{# } }}
  </div>
</script>
<script type="text/html" id="jobLog-status">
  {{#
  var status = {
  0: {title: '成功', color: 'green'},
  1: {title: '失败', color: 'volcano'}
  }[d.status];
  }}
  <span class="layui-badge admin-tag-{{status.color}}">{{ status.title }}</span>
</script>
<script type="text/html" id="jobLog-option">
  <span shiro:lacksPermission="job:log:delete">
        <span class="layui-badge-dot admin-bg-orange"></span> 无权限
    </span>
  <a lay-event="del" shiro:hasPermission="job:log:delete"><i
      class="layui-icon admin-edit-area admin-red">&#xe7f9;</i></a>
</script>
<script data-th-inline="none" type="text/javascript">
  layui.use(['dropdown', 'jquery', 'form', 'table', 'admin'], function () {
    var $           = layui.jquery,
        laydate     = layui.laydate,
        admin       = layui.admin,
        form        = layui.form,
        table       = layui.table,
        dropdown    = layui.dropdown,
        $view       = $('#admin-job-log'),
        $query      = $view.find('#query'),
        $reset      = $view.find('#reset'),
        $searchForm = $view.find('form'),
        sortObject  = {field: 'createdAt', type: null},
        tableIns;

    form.render();
    initTable();

    dropdown.render({
                      elem   : $view.find('.action-more'),
                      click  : function (name, elem, event) {
                        var checkStatus = table.checkStatus('jobLogTable');
                        if (name === 'delete') {
                          if (!checkStatus.data.length) {
                            admin.alert.warn('请选择需要删除的调度日志');
                          } else {
                            admin.modal.confirm('删除日志', '确定删除该调度日志？', function () {
                              var jobLogIds = [];
                              layui.each(checkStatus.data, function (key, item) {
                                jobLogIds.push(item.logId)
                              });
                              deleteJobsLogs(jobLogIds.join(','));
                            });
                          }
                        }
                        if (name === 'export') {
                          var params      = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
                          params.pageSize = $view.find(".layui-laypage-limits option:selected").val();
                          params.pageNum  = $view.find(".layui-laypage-em").next().html();
                          admin.download(ctx + 'jobLog/excel', params, '调度日志表.xlsx');
                        }
                      },
                      options: [{
                        name : 'delete',
                        title: '删除日志',
                        perms: 'job:log:delete'
                      }, {
                        name : 'export',
                        title: '导出Excel',
                        perms: 'job:log:export'
                      }]
                    });

    $query.on('click', function () {
      var params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
      tableIns.reload({where: params, page: {curr: 1}});
    });

    $reset.on('click', function () {
      $searchForm[0].reset();
      sortObject.type = 'null';
      tableIns.reload({where: getQueryParams(), page: {curr: 1}, initSort: sortObject});
    });

    table.on('tool(jobLogTable)', function (obj) {
      var data     = obj.data,
          layEvent = obj.event;
      if (layEvent === 'del') {
        admin.modal.confirm('删除调度日志', '确定删除调度日志？', function () {
          deleteJobsLogs(data.logId);
        });
      }
    });

    table.on('sort(jobLogTable)', function (obj) {
      sortObject = obj;
      tableIns.reload({
                        initSort: obj,
                        where   : $.extend(getQueryParams(), {
                          field: obj.field,
                          order: obj.type
                        })
                      });
    });

    function deleteJobsLogs(jobLogIds) {
      admin.get(ctx + 'jobLog/delete/' + jobLogIds, null, function () {
        admin.alert.success('删除调度日志成功');
        $query.click();
      });
    }

    function initTable() {
      tableIns = admin.table.init({
                                    elem: $view.find('table'),
                                    id  : 'jobLogTable',
                                    url : ctx + 'jobLog',
                                    cols: [[
                                      {type: 'checkbox'},
                                      {field: 'jobId', title: '任务ID', width: 80},
                                      {field: 'beanName', title: 'Bean名称'},
                                      {field: 'methodName', title: '方法名称', maxWidth: 200},
                                      {field: 'params', title: '方法参数', maxWidth: 180},
                                      {title: '状态', templet: '#jobLog-status'},
                                      {field: 'error', title: '异常信息', maxWidth: 200},
                                      {title: '耗时', templet: '#jobLog-times'},
                                      {field: 'createdAt', title: '执行时间', minWidth: 180, sort: true},
                                      {title: '操作', toolbar: '#jobLog-option', minWidth: 140}
                                    ]]
                                  });
    }

    function getQueryParams() {
      return {
        status             : $searchForm.find("select[name='status']").val(),
        beanName           : $searchForm.find("input[name='beanName']").val().trim(),
        methodName         : $searchForm.find("input[name='methodName']").val().trim(),
        invalidate_ie_cache: new Date()
      };
    }
  })
</script>